@-webkit-keyframes slide-in-up {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slide-in-up {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slide-in-up {
  -webkit-animation-name: slide-in-up;
  animation-name: slide-in-up;
}

@-webkit-keyframes slide-in-left {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-100px, 0, 0);
    visibility: visible;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-100px, 0, 0);
    visibility: visible;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slide-in-left {
  -webkit-animation-name: slide-in-left;
  animation-name: slide-in-left;
}

@-webkit-keyframes slide-in-right {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
    visibility: visible;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
    visibility: visible;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes carousel-to-left {
  from {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  to {
    opacity: 0.5;
    z-index: 90;
    transform: translate(-50%, 0) translate(-100px, 0) scale(0.9, 0.9);
  }
}

@keyframes carousel-to-right {
  from {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.9, 0.9);
  }
  to {
    opacity: 0.5;
    transform: translate(-50%, 0) translate(100px, 0) scale(0.9, 0.9);
  }
}

@keyframes carousel-to-center {
  from {
    opacity: 1;
    transform: translate(-50%, 0) translate(100px, 0) scale(0.9, 0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.slide-in-right {
  -webkit-animation-name: slide-in-right;
  animation-name: slide-in-right;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}